<template>
	<view class="awakener-detail-container">
		<!-- 顶部导航栏 -->
		<view class="top-nav" :style="{ top: safeDistance + 'px' }">
			<view class="back-button" @click="handleGoBack">
				<text class="back-icon">←</text>
			</view>
		</view>

		<!-- 主要内容区域（刚好占据整个页面高度） -->
		<view class="main-content">
			<!-- 图片区域 -->
			<view class="image-section">
				<image 
					class="awakener-image" 
					:src="awakenerDetail.avatar" 
					mode="aspectFill"
					@error="handleImageError"
				/>
				<view v-if="awakenerDetail.tags && awakenerDetail.tags.length > 0" class="tags-overlay">
					<view 
						v-for="(tag, index) in awakenerDetail.tags" 
						:key="index" 
						class="tag-badge"
					>
						<text class="tag-text">{{ tag }}</text>
					</view>
				</view>
				<text class="awakener-name-large">{{ awakenerDetail.name }}</text>
				<text class="awakener-title-large">{{ awakenerDetail.title }}</text>
			</view>

			<!-- 觉醒级别区域 -->
			<view class="awakening-section">
				<text class="section-title">觉醒级别</text>
				<view class="awakening-stars-wrapper">
					<view class="awakening-stars">
						<text 
							v-for="i in 5" 
							:key="i" 
							class="awakening-star"
							:class="{ 'awakening-star-filled': i * 2 <= awakenerDetail.awakeningLevel }"
						>
							{{ i * 2 <= awakenerDetail.awakeningLevel ? '⭐' : '☆' }}
						</text>
					</view>
					<text class="awakening-level-text">{{ Math.ceil(awakenerDetail.awakeningLevel / 2) }}/5</text>
				</view>
			</view>

			<!-- 事迹区域 -->
			<view class="story-section">
				<text class="section-title">事迹</text>
				<text class="story-text">{{ awakenerDetail.story }}</text>
			</view>

			<!-- 评价区域 -->
			<view class="evaluation-section">
				<text class="section-title">评价</text>
				<text class="evaluation-text">{{ awakenerDetail.evaluation }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	import { getAwakenerById } from '@/data/awakener';
	import type { Awakener } from '@/types/awakener';

	const awakenerDetail = ref<Awakener>({
		id: 0,
		name: '',
		title: '',
		period: '',
		avatar: '',
		description: '',
		story: '',
		evaluation: '',
		awakeningLevel: 0,
		field: [],
		tags: []
	});

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		return safeAreaTop + 20;
	});

	onLoad((options: any) => {
		const id = parseInt(options.id || '1');
		const foundAwakener = getAwakenerById(id);

		if (foundAwakener) {
			awakenerDetail.value = foundAwakener;
		} else {
			uni.showToast({
				title: '未找到该觉醒者信息',
				icon: 'none',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		}
	});

	const handleGoBack = () => {
		uni.navigateBack();
	};

	// 图片加载错误处理
	const handleImageError = (e: any) => {
		// 如果图片加载失败，可以使用默认头像
		console.log('图片加载失败:', e);
		// 可以设置默认图片
		// awakenerDetail.value.avatar = '/static/default-avatar.png';
	};
</script>

<style lang="scss" scoped>
	.awakener-detail-container {
		height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/**
	 * 顶部导航栏
	 */
	.top-nav {
		position: absolute;
		left: 24rpx;
		z-index: 10;
		box-sizing: border-box;
	}

	.back-button {
		width: 72rpx;
		height: 72rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
		transition: all 0.3s ease;
		backdrop-filter: blur(10rpx);
	}

	.back-button:active {
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 40rpx;
		color: #1a202c;
		font-weight: 700;
	}

	/**
	 * 主要内容区域（刚好占据整个页面高度）
	 */
	.main-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: calc(env(safe-area-inset-top) + 120rpx) 32rpx calc(env(safe-area-inset-bottom) + 40rpx);
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;
	}

	/**
	 * 图片区域
	 */
	.image-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-bottom: 40rpx;
		position: relative;
	}

	.awakener-image {
		width: 280rpx;
		height: 280rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.25);
		border: 6rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.25);
		margin-bottom: 32rpx;
		backdrop-filter: blur(15rpx);
	}

	.tags-overlay {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.tag-badge {
		padding: 8rpx 16rpx;
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(245, 158, 11, 0.4);
		border: 2rpx solid white;
	}

	.tag-text {
		font-size: 22rpx;
		color: white;
		font-weight: 700;
	}

	.awakener-name-large {
		font-size: 64rpx;
		font-weight: 900;
		color: white;
		margin-bottom: 16rpx;
		text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.4);
		letter-spacing: 2rpx;
	}

	.awakener-title-large {
		font-size: 32rpx;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.9);
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}

	/**
	 * 觉醒级别区域
	 */
	.awakening-section {
		flex-shrink: 0;
		margin-bottom: 32rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 800;
		color: white;
		margin-bottom: 24rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		display: block;
	}

	.awakening-stars-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24rpx;
		padding: 24rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.2);
	}

	.awakening-stars {
		display: flex;
		gap: 6rpx;
		flex: 1;
		flex-wrap: wrap;
	}

	.awakening-star {
		font-size: 36rpx;
		line-height: 1;
		transition: all 0.3s ease;
	}

	.awakening-star-filled {
		filter: drop-shadow(0 2rpx 6rpx rgba(255, 215, 0, 0.6));
		transform: scale(1.1);
	}

	.awakening-level-text {
		font-size: 36rpx;
		font-weight: 800;
		color: white;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		white-space: nowrap;
	}

	/**
	 * 事迹区域
	 */
	.story-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
		margin-bottom: 32rpx;
	}

	.story-text {
		flex: 1;
		font-size: 28rpx;
		color: white;
		line-height: 1.8;
		padding: 24rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.2);
		text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
		overflow-y: auto;
		min-height: 0;
		text-align: justify;
	}

	/**
	 * 评价区域
	 */
	.evaluation-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.evaluation-text {
		flex: 1;
		font-size: 28rpx;
		color: white;
		line-height: 1.8;
		padding: 24rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.2);
		text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
		overflow-y: auto;
		min-height: 0;
		text-align: justify;
	}
</style>

